<template>
	<view class="settlement-info">
		<view class="card" id="scrollFlag">
			<view class="title">
				结算信息
			</view>
			<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
				<u-form-item class="form-item" label="账户类型" labelWidth="100">
					<u-radio-group v-model="formData.account_info.account_type" @change="selectAccountType">
						<u-radio v-for="(item,index) in accuntType" :key="index" :name="item.value"
							:label="item.name"></u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item class="form-item" label="结算标识" labelWidth="100">
					<u-radio-group v-model="formData.account_info.settle_type" @change="selectFlag">
						<u-radio v-for="(item,index) in accuntFlag" :key="index" :name="item.value"
							:label="item.name"></u-radio>
					</u-radio-group>
				</u-form-item>

				<!-- 个人账户，卡号识别 -->
				<block
					v-if="formData.account_info.account_type==1 || (formData.account_info.account_type==2 && formData.account_info.settle_type==1)">
					<view class="name" style="padding-bottom: 20rpx;padding-top: 20rpx;">
						银行卡正面
					</view>
					<view class="upload" style="padding-bottom: 20rpx;">
						<uni-file-picker v-model="bankCard" file-mediatype="image" mode="grid"
							:image-styles="imageStyles" :file-extname="extname" :auto-upload="false" custom-btn
							:limit="1" @select="selectFile($event, 6)" @delete="removeOk($event, 6)">
							<view class="custom-upload" slot="addBtn">
								<uni-icons type="camera-filled" size="52" color="#999"></uni-icons>
								<text class="label">银行卡正面照</text>
							</view>
						</uni-file-picker>
						<view class="example-img" @click="previewImg(imgHost+'/static/images/example/bank.jpg')">
							<image mode="withFix" width="100%" height="100%"
								:src="imgHost+'/static/images/example/bank.jpg'"></image>
							<view class="label">银行卡正面照例图</view>
						</view>
					</view>
				</block>

				<!-- 企业账户 -->
				<block v-if="formData.account_info.account_type == 2 && formData.account_info.settle_type == 2">
					<view class="license" style="padding-bottom: 20rpx;">
						<view class="name">
							开户许可证照片
						</view>
						<view class="upload">
							<uni-file-picker v-model="openingPermit" file-mediatype="image" mode="grid"
								:image-styles="imageStyles" :file-extname="extname" :auto-upload="false" custom-btn
								:limit="1" @select="selectFile($event, 5)" @delete="removeOk($event, 5)">
								<view class="custom-upload" slot="addBtn">
									<uni-icons type="camera-filled" size="52" color="#999"></uni-icons>
									<text class="label">开户许可证照片</text>
								</view>
							</uni-file-picker>
							<view class="example-img"
								@click="previewImg(imgHost+'/static/images/example/open-license.png')">
								<image mode="withFix" width="100%" height="100%"
									:src="imgHost+'/static/images/example/open-license.png'"></image>
								<view class="label">开户许可证照片示例图</view>
							</view>
						</view>
					</view>
				</block>

				<u-form-item class="form-item" label="结算账户" labelWidth="100">
					<u-input border="bottom" :clearable="true" v-model="formData.account_info.bank_card_no"
						placeholder="请输银行卡卡号"></u-input>
				</u-form-item>

				<u-form-item class="form-item" label="开户名" labelWidth="100">
					<u-input border="bottom" :clearable="true" v-model="formData.account_info.settle_name"
						placeholder="请输银行开户名"></u-input>
				</u-form-item>
				<view class="tips">
					<uni-icons type="info" size="14" color="#ffc30f"></uni-icons>
					<text class="desc">
						注：
						个人账户，法人结算时，开户名与法人姓名姓名一致。
						企业账户，法人结算时，开户名与与营业执照注册名称一致。
					</text>
				</view>

				<u-form-item class="form-item" label="银行预留号码" labelWidth="100">
					<u-input border="bottom" :clearable="true" v-model="formData.account_info.bank_cell_phone"
						placeholder="请输银行卡预留号码"></u-input>
				</u-form-item>

				<u-form-item class="form-item" label="银行简称" labelWidth="100">
					<uni-easyinput :inputBorder="false" :clearable="false"
						v-model="formData.account_info.bank_shot_name" placeholder="请输入银行简称" suffixIcon="search"
						@iconClick="checkBankName()"></uni-easyinput>
				</u-form-item>
				<u-form-item class="form-item" label="银行全称" labelWidth="100">
					<u-input border="bottom" :clearable="false" v-model="formData.account_info.bank_full_name" disabled
						placeholder="录入银行简称,自动检测"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="开户地区" labelWidth="100">
					<uni-data-picker v-model="formData.account_info.account_area" :localdata="areaList"
						popup-title="请选择开户地区" @change="areaConfirm"></uni-data-picker>
				</u-form-item>
				<u-form-item class="form-item" label="支行名称" labelWidth="100">
					<u-input border="bottom" :clearable="false" v-model="formData.account_info.bank_branch_name"
						placeholder="请选择支行" disabled></u-input>
					<zqs-select style="width: 50rpx;" :multiple="false" :list="branchList" :showSearch="true"
						label-key="name" value-key="code" title="选择支行" clearable @search="searchBranch"
						@change="selectBranch"></zqs-select>
				</u-form-item>
				<u-form-item class="form-item" label="联行号" labelWidth="100">
					<u-input border="bottom" :clearable="false" v-model="formData.account_info.unionpay_code"
						placeholder="选择支行后自动识别" disabled></u-input>
				</u-form-item>

				<block
					v-if="formData.account_info.account_type==1 || (formData.account_info.account_type==2 && formData.account_info.settle_type==1)">
					<view class="identify" style="padding-bottom: 20rpx;">
						<view class="name" @click="previewImg(imgHost+'/static/images/example/identify.jpg')">
							证件照 <view class="more">
								查看示例<uni-icons type="right"></uni-icons>
							</view>
						</view>
						<view class="upload">
							<uni-file-picker v-model="idCardFont" file-mediatype="image" mode="grid"
								:image-styles="imageStyles" :file-extname="extname" :auto-upload="false" custom-btn
								:limit="1" @select="selectFile($event, 1)" @delete="removeOk($event, 1)">
								<view class="custom-upload" slot="addBtn">
									<uni-icons type="camera-filled" size="52" color="#999"></uni-icons>
									<text class="label">身份证正面</text>
								</view>
							</uni-file-picker>

							<uni-file-picker v-model="idCardback" file-mediatype="image" mode="grid"
								:image-styles="imageStyles" :file-extname="extname" :auto-upload="false" custom-btn
								:limit="1" @select="selectFile($event, 2)" @delete="removeOk($event, 2)">
								<view class="custom-upload" slot="addBtn">
									<uni-icons type="camera-filled" size="52" color="#999"></uni-icons>
									<text class="label">身份证背面</text>
								</view>
							</uni-file-picker>
						</view>
					</view>

					<u-form-item class="form-item" label="身份证号" labelWidth="100">
						<u-input border="bottom" :clearable="true" v-model="formData.account_info.settle_idcard_no"
							placeholder="请输结算人身份证号"></u-input>
					</u-form-item>
					<u-form-item class="form-item" label="有效期" labelWidth="80">
						<view class="choose-time">
							<input v-model="formData.account_info.settle_idcard_begin_date" type="text"
								placeholder="请选择起始时间">
							至
							<input v-model="formData.account_info.settle_idcard_end_date" type="text"
								placeholder="请选择结束时间">
						</view>
					</u-form-item>
				</block>

				<view class="license" style="padding-bottom: 20rpx;" v-if="formData.account_info.settle_type == 1">
					<view class="name">
						非法人结算授权书
						<!-- #ifdef APP-PLUS -->
						(<view style="color:darkolivegreen;" @click="downFile()">下载授权书</view>)
						<!-- #endif -->
						<!-- #ifdef H5 -->
						(<a :href="imgHost+'/template/jiesuan.pdf'">下载授权书</a>)
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						(<view style="color:darkolivegreen;" @click="downFileBack()">下载授权书</view>)
						<!-- #endif -->
					</view>
					<view class="upload">
						<uni-file-picker v-model="notFaren" file-mediatype="image" mode="grid"
							:image-styles="imageStyles" :file-extname="extname" :auto-upload="false" custom-btn
							:limit="1" @select="selectFile($event, 7)" @delete="removeOk($event, 7)">
							<view class="custom-upload" slot="addBtn">
								<uni-icons type="camera-filled" size="52" color="#999"></uni-icons>
								<text class="label">非法人结算授权书</text>
							</view>
						</uni-file-picker>
					</view>
				</view>
			</u-form>
		</view>

		<view class="opt-btn">
			<view><button type="success" @click="stepHandle(backStep, 'back')">上一步</button></view>
			<view><button type="primary" @click="stepHandle(nextStep, 'next')">下一步</button></view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		onMounted,
		reactive,
		toRefs,
		defineProps,
		ref
	} from 'vue';

	defineOptions({
		name: 'settlement-info'
	});

	onMounted(() => {
		console.log('组件已挂载');
		// 这里可以执行需要在DOM挂载后执行的代码
		initData();
	});

	const props = defineProps({
		backStep: 1,
		nextStep: 3,
		formData: {
			type: Object,
			default () {
				return {
					account_info: {
						account_type: 2, // M 结算账户类型，1个人账户，2企业账户
						settle_type: 2, // M 结算人类型，1非法人结算，2法人结算，3对公结算
						bank_card_photo: '', //结算卡照片
						opening_license_photo: "", // 开户许可证
						bank_card_no: "", // M 银行卡号
						bank_cell_phone: "", // C 银行预留号码
						settle_name: "", // M 开户名

						// 这些是额外补充的中间变量，用户获取结算账户的信息
						bank_shot_name: "", // 显示使用：银行简称
						bank_full_name: "", // 显示使用：银行全称
						bank_branch_name: '', //银行支行名称
						account_province: "0", //开户行省
						account_city: "0", //开户行市
						account_area: "0", //开户行区县
						account_area_str: "", //开户行地区

						unionpay_code: "", // M 开户支行联行号
						settle_idcard_no: "", // C 结算人身份证号
						settle_idcard_front_photo: "", // C 结算人身份证人像面照片
						settle_idcard_back_photo: "", // C 结算人身份证人像面照片
						settle_idcard_start: "", // 结算人身份证开始日期
						settle_idcard_end: "", // 结算人身份证结束日期
						settle_idcard_validity_type: 0, // 结算人身份证是否长期：0否，1是
						unincorporated_photo: "", // C 非法人结算授权书
					},
				}
			}
		}
	});

	const state = reactive({
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),

		accuntType: [{
				value: 1,
				name: "个人账户",
			},
			{
				value: 2,
				name: "企业账户",
			},
		],
		accuntFlag: [{
				value: 1,
				name: "非法人结算 ",
			},
			{
				value: 2,
				name: "法人结算",
			},
		],

		areaList: [], // 地区列表
		branchList: [], // 支行列表

		idCardFont: [], // 身份证正面
		idCardback: [], // 身份证背面
		bankCard: [], // 银行卡正面
		openingPermit: [], // 开户许可证
		notFaren: [], // 非法人结算授权书
	});

	const rules = ref([]);
	const formRef = ref();
	const extname = ref('jpg,jpeg,png,bmp,gif,tif,svg,webp');
	const imageStyles = ref({
		"width": '316rpx', // 边框宽度
		"height": '260rpx', // 边框高度
		"border": { // 如果为 Boolean 值，可以控制边框显示与否
			"color": "#909193", // 边框颜色
			"width": "1px", // 边框宽度
			"style": "solid", // 边框样式
		}
	});
	const emits = defineEmits(["changeStep", "update:formData"]);

	function initData() {
		if (props.formData.account_info.settle_idcard_front_photo) {
			state.idCardFont = [{
				name: props.formData.account_info.settle_idcard_front_photo,
				extname: 'image', // 文件类型，image/video/file
				url: state.imgHost + props.formData.account_info.settle_idcard_front_photo,
			}];
			// shibieCard(props.formData.account_info.settle_idcard_front_photo, 1);
		}
		if (props.formData.account_info.settle_idcard_back_photo) {
			state.idCardback = [{
				name: props.formData.account_info.settle_idcard_back_photo,
				extname: 'image',
				url: state.imgHost + props.formData.account_info.settle_idcard_back_photo,
			}];
			// shibieCard(props.formData.account_info.settle_idcard_back_photo, 2);
		}
		if (props.formData.account_info.bank_card_photo) {
			state.bankCard = [{
				name: props.formData.account_info.bank_card_photo,
				extname: 'image',
				url: state.imgHost + props.formData.account_info.bank_card_photo,
			}];
			// shibieCard(props.formData.account_info.bank_card_photo, 6);
		}
		if (props.formData.account_info.opening_license_photo) {
			state.openingPermit = [{
				name: props.formData.account_info.opening_license_photo,
				extname: 'image',
				url: state.imgHost + props.formData.account_info.opening_license_photo,
			}];
		}
		if (props.formData.account_info.unincorporated_photo) {
			state.notFaren = [{
				name: props.formData.account_info.unincorporated_photo,
				extname: 'image',
				url: state.imgHost + props.formData.account_info.unincorporated_photo,
			}];
		}

		getCity();
	}

	// 账户类型选择
	function selectAccountType(res) {
		props.formData.account_info.account_type = res.detail.value;
		emits('update:formData', props.formData);
	}

	// 结算标志选择
	function selectFlag(res) {
		props.formData.account_info.settle_type = res.detail.value;
		emits('update:formData', props.formData);
	}

	// 检测银行全名
	function checkBankName() {
		if (!props.formData.account_info.bank_shot_name) {
			uni.showToast({
				title: '请输入银行简称再开始检测',
				icon: 'none',
				mask: true,
			})
			return;
		}
		let params = {
			bankName: props.formData.account_info.bank_shot_name
		};
		request.get("boxpay/checkBankName", params)
			.then(res => {
				props.formData.account_info.bank_full_name = res.data.full_name;
				emits('update:formData', props.formData);
			})
			.catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'error',
					mask: true,
				})
				props.formData.account_info.bank_full_name = "";
			})
	}

	// 获取省市区县编码
	function getCity() {
		let city = cache.get("shop_getCity");
		if (city) {
			console.log('省市区县编码', city);
			state.areaList = city;
			return;
		}

		request.get("address/getThreeArea", {})
			.then(res => {
				state.areaList = res.data;
				cache.set('shop_getCity', res.data);
			})
			.catch(err => {
				console.log('获取数据异常', err);
			})
	}

	// 确认选择地区
	function areaConfirm(res) {
		console.log('确认选择地区', res);
		const data = res.detail.value;
		let areaStr = data[0].text + '-' + data[1].text + '-' + data[2].text;
		props.formData.account_info.account_area_str = areaStr;
		// 省，市，县编码
		props.formData.account_info.account_province = data[0].value;
		props.formData.account_info.account_city = data[1].value;
		props.formData.account_info.account_area = data[2].value;

		// getBankClearingNumber(data[1].value);
		// 清空支行名
		props.formData.account_info.bank_branch_name = "";
		// 清空联行号
		props.formData.account_info.unionpay_code = "";
		// 获取支行列表
		getSubBranch();

		emits('update:formData', props.formData);
	}

	// 获取支行列表
	function getSubBranch(branch_name = "") {
		request.get("boxpay/getSubBranch", {
				city_code: props.formData.account_info.account_city,
				bank_full_name: props.formData.account_info.bank_full_name,
				branch_name: branch_name,
			}).then(res => {
				console.log('支行列表', res)
				state.branchList = res.data;
			})
			.catch(err => {
				console.log('获取数据异常', err);
			})
	}

	// 搜索支行
	function searchBranch(val) {
		console.log(val);
		getSubBranch(val);
	}

	// 支行确认
	function selectBranch(res) {
		console.log(res);
		props.formData.account_info.bank_branch_name = res.name;
		props.formData.account_info.unionpay_code = res.code;
	}

	// 下一步
	function stepHandle(step, type) {
		if (type == 'back') {
			console.log('上一步', step);
			emits('changeStep', step);
		} else {
			console.log('下一步', step);
			// 验证数据
			let check = checkData();
			if (!check) {
				return;
			}
			emits('update:formData', props.formData);
			emits('changeStep', step);
		}
	}

	function checkData() {
		// 企业账户
		if (props.formData.account_info.account_type == 2) {
			// 法人结算
			if (props.formData.account_info.settle_type == 2) {
				if (!props.formData.account_info.opening_license_photo) {
					util.showTip('请上传开户许可证');
					return false;
				}
			}
			// 非法人结算
			else {
				if (!props.formData.account_info.bank_card_photo) {
					util.showTip('请上传结算银行卡');
					return false;
				}
				if (!props.formData.account_info.settle_idcard_front_photo) {
					util.showTip('请上传身份证正面');
					return false;
				}
				if (!props.formData.account_info.settle_idcard_back_photo) {
					util.showTip('请上传身份证反面');
					return false;
				}
				if (!props.formData.account_info.settle_idcard_no) {
					util.showTip('请填写结算人身份证号码');
					return false;
				}
				if (!props.formData.account_info.settle_idcard_back_photo) {
					util.showTip('请上传非法人结算授权书');
					return false;
				}
			}
		}
		// 个人账户
		else {
			if (!props.formData.account_info.bank_card_photo) {
				util.showTip('请上传结算银行卡');
				return false;
			}
			if (!props.formData.account_info.settle_idcard_front_photo) {
				util.showTip('请上传身份证正面');
				return false;
			}
			if (!props.formData.account_info.settle_idcard_back_photo) {
				util.showTip('请上传身份证反面');
				return false;
			}
			if (!props.formData.account_info.settle_idcard_no) {
				util.showTip('请填写结算人身份证号码');
				return false;
			}
			// 非法人结算
			if (props.formData.account_info.settle_type == 1) {
				if (!props.formData.account_info.settle_idcard_back_photo) {
					util.showTip('请上传非法人结算授权书');
					return false;
				}
			}
		}
		if (!props.formData.account_info.bank_card_no) {
			util.showTip('请填写结算账户');
			return false;
		}
		if (!props.formData.account_info.settle_name) {
			util.showTip('请填写结算账户开户名');
			return false;
		}
		if (!props.formData.account_info.bank_cell_phone) {
			util.showTip('请填写结算账户银行预留号码');
			return false;
		}
		if (!props.formData.account_info.bank_full_name) {
			util.showTip('请选择开户银行');
			return false;
		}
		return true;
	}

	// 选择图片
	function selectFile(res, flag) {
		console.log('selectFile', res, flag);

		// 上传
		for (let i = 0; i < res.tempFilePaths.length; i++) {
			upload(res.tempFilePaths[i], flag);
		}
	}

	// 删除照片
	function removeOk(res, flag) {
		console.log('removeOk', res, flag);
		// 身份证正面
		if (flag == 1) {
			props.formData.account_info.settle_idcard_front_photo = "";
			state.idCardFont = [];
		}

		// 身份证反面
		if (flag == 2) {
			props.formData.account_info.settle_idcard_back_photo = "";
			state.idCardback = [];
		}

		// 银行卡正面
		if (flag == 6) {
			props.formData.account_info.bank_card_photo = "";
			state.bankCard = [];
		}

		// 开户许可证
		if (flag == 5) {
			props.formData.account_info.opening_license_photo = "";
			state.openingPermit = [];
		}

		// 非法人结算证明
		if (flag == 7) {
			props.formData.account_info.unincorporated_photo = "";
			state.notFaren = [];
		}
	}

	// 图片上传:bankCard,idCard,license,store,other
	function upload(file, flag) {
		let type = 'other';
		// 身份证正面，反面，手持
		if (flag == 1) {
			type = "idCardFront";
		} else if (flag == 2) {
			type = "idCardBack";
		} else if (flag == 3) {
			type = "personWithIdCard";
		}
		// 营业执照
		else if (flag == 4) {
			type = "license";
		}
		// 银行卡正面
		else if (flag == 6) {
			type = "bankCard";
		} else {
			type = "other";
		}
		uni.uploadFile({
			url: util.requestUrl() + '/api/upload/uploadfile', // 开发者服务器接口地址
			filePath: file, // 要上传文件资源的路径
			name: 'file', // 文件对应的 key
			formData: {
				'type': type,
				'token': cache.get('M_LOGIN_TOKEN', false) || '',
				'role': cache.get('role', false) || 0,
			}, // 请求的 form data
			success: (res) => {
				const json = JSON.parse(res.data);
				if (json.code == 1) {
					const data = json.data;
					console.log('上传成功', data);
					util.showTip(data.originalName + '上传成功');
					// 处理上传成功的结果
					// 身份证正面
					if (flag == 1) {
						props.formData.account_info.settle_idcard_front_photo = data.url;
						state.idCardFont = [{
							name: data.url,
							extname: data.fileType, // 文件类型，image/video/file
							url: data.url2,
						}];
					}

					// 身份证反面
					if (flag == 2) {
						props.formData.account_info.settle_idcard_back_photo = data.url;
						state.idCardback = [{
							name: data.url,
							extname: data.fileType,
							url: data.url2,
						}];
					}

					// 银行卡正面
					if (flag == 6) {
						props.formData.account_info.bank_card_photo = data.url;
						state.bankCard = [{
							name: data.url,
							extname: data.fileType,
							url: data.url2,
						}];
					}

					// 开户许可证
					if (flag == 5) {
						props.formData.account_info.opening_license_photo = data.url;
						state.openingPermit = [{
							name: data.url,
							extname: data.fileType,
							url: data.url2,
						}];
					}

					// 非法人结算证明
					if (flag == 7) {
						props.formData.account_info.unincorporated_photo = data.url;
						state.notFaren = [{
							name: data.url,
							extname: data.fileType,
							url: data.url2,
						}];
					}

					// 识别证件
					shibieCard(data.data, flag);
				}
			},
			fail: (error) => {
				console.error('上传失败', error);
				// 处理上传失败的错误
				uni.showToast({
					title: '网络错误，请稍后再试！',
					icon: fail,
					duration: 2000
				})
			}
		});
	}

	// 识别身份证，营业执照
	function shibieCard(file, flag) {
		let params = {};
		params.file = file;
		params.cardType = 0;
		params.side = "";
		// 身份证正面
		if (flag == 1) {
			params.cardType = 2;
			params.side = "front";
		}

		// 身份证反面
		if (flag == 2) {
			params.cardType = 3;
			params.side = "back";
		}

		// 银行卡正面
		if (flag == 6) {
			params.cardType = 17;
			params.side = "front";
		}
		if (!params.cardType) {
			return;
		}

		let methods = "juheapi/doImg"; // 请求接口
		if (params.cardType) {
			uni.showLoading({
				title: "识别中...."
			})
			request.post(methods, params)
				.then(res => {
					uni.hideLoading();

					// 身份证正面
					if (flag == 1) {
						props.formData.account_info.settle_name = res.data.姓名;
						props.formData.account_info.settle_idcard_no = res.data.公民身份号码;
					}

					// 身份证反面
					if (flag == 2) {
						props.formData.account_info.settle_idcard_begin_date = res.data.签发日期;
						props.formData.account_info.settle_idcard_end_date = res.data.有效期至;
						if (res.data.有效期至 == '长期') {
							props.formData.account_info.settle_idcard_validity_type = 1;
						} else {
							props.formData.account_info.settle_idcard_validity_type = 0;
						}
					}

					// 银行卡号
					if (flag == 6) {
						props.formData.account_info.bank_card_no = res.data.卡号
					}
					emits('update:formData', props.formData);
				})
				.catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg,
						icon: 'error',
						mask: true,
					})
				})
		}
	}

	// 下载授权书
	function downFile() {
		var date = new Date();
		let time = "_" + date.getDate() + date.getHours() + date.getMinutes();
		let url = util.requestUrl() + "/template/shouquanshu.docx";
		let filename = "file://storage/emulated/0/rdyx/" + "结算确认书" + time + ".pdf";

		let dask = plus.downloader.createDownload(
			url, {
				filename: filename
			},
			function(d, status) {
				if (status == 200) {
					// d.filename 是临时文件路径，使用下面的接口保存到手机的绝对路径。
					let fileSave = plus.io.convertLocalFileSystemURL(d.filename);
					// 使用手机内部软件打开文件
					// plus.runtime.openFile(d.filename);
					// console.log("下载成功")

					uni.showModal({
						title: "下载文件",
						content: "下载成功:rdyx/" + "结算确认书" + time + ".pdf",
						showCancel: false,
					})
				} else {
					// 下载失败
					plus.downloader.clear();
					uni.showToast({
						title: "下载失败",
						icon: "none"
					})
				}
			}
		);

		// 执行下载
		dask.start();

	}

	// uniapp 自带下载，文件保存在 “内部存储\Android\data\io.dcloud 里，不方便用户查找
	function downFileBack() {
		uni.downloadFile({
			url: util.requestUrl() + '/template/shouquanshu.docx', //仅为示例，并非真实的资源
			success: (res) => {
				if (res.statusCode === 200) {
					console.log('下载成功');
					var sFilePath = res.tempFilePath;
					console.log(1, sFilePath);
					//保存文件
					uni.saveFile({
						tempFilePath: res.tempFilePath, //下载成功之后返回的临时路径
						success: e => {
							console.log(2, e.savedFilePath);

							uni.getSavedFileInfo({
								filePath: e.savedFilePath,
								success: function(res) {
									console.log(3, res);
								}
							});
						}
					});
				}
			}
		});
	}

	// 图片预览
	function previewImg(url) {
		uni.previewImage({
			urls: [url]
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	};

	const {
		themeColor,
		imgHost,
		accuntType,
		accuntFlag,
		areaList,
		branchList,
		idCardFont,
		idCardback,
		bankCard,
		openingPermit,
		notFaren,
	} = toRefs(state);
</script>

<style lang="scss">
	.settlement-info {
		.card {
			margin: 24rpx 0;
			padding: 0 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			::v-deep .u-cell-title {
				padding-left: 0;
				padding-top: 0;
				color: #909193;
				font-size: $font-28;
			}

			.u-cell {
				padding-left: 0;
				padding-right: 0;
			}

			.title {
				display: flex;
				align-items: center;
				height: 90rpx;
				font-size: $font-32;
				color: #303133;
			}

			.license,
			.m-identify,
			.identify {
				.name {
					@include f-between;
					height: 80rpx;
					color: #303133;
					line-height: 80rpx;

					.more {
						@include f-center;
						font-size: $font-24;
						color: #909193
					}
				}
			}

			.tips {
				@include f-between;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #dadbde;

				.desc {
					flex: 1;
					margin-left: 8rpx;
					color: #ffc30f;
					font-size: $font-20;
				}

				.more {
					@include f-center;
					font-size: $font-20;
					color: #909193;
				}
			}

			.choose-time {
				display: flex;
				align-items: center;
				padding: 20rpx 0 24rpx;
				border-bottom: 1rpx solid #dadbde;

				input {
					text-align: center;
					font-size: $font-26;
				}
			}
		}

		.opt-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-around
		}
	}


	.upload {
		@include f-between;

		.u-list-item {
			margin: 0;
		}

		.custom-upload,
		.example-img {
			overflow: hidden;
			width: 316rpx;
			height: 260rpx;
			background-color: #f3f4f6;
			border-radius: 12rpx;
		}

		.custom-upload {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.label {
				margin-top: 12rpx;
				font-size: $font-26;
				color: #909193;
			}
		}

		.example-img {
			position: relative;

			.label {
				@include f-center;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 60rpx;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				font-size: $font-26;
			}
		}
	}
</style>